import React, { useState } from 'react';
import './styles/SideMenu.css'
import ChangeReport from './ReportDialog';

function SideMenu() {
    const [isOpen, setIsOpen] = useState(false);
    const [reportId, setReportId] = useState(-1);


  const [reports, setReports] = useState([
    { action: "Upload document", file: "document1.pdf" },
  { action: "Send email to client regarding project update", file: "image1.jpg" },
  { action: "Edit spreadsheet", file: "spreadsheet1.xlsx" },
  { action: "View presentation", file: "presentation1.pptx" },
  { action: "Share video", file: "video1.mp4" },
  { action: "Read text file", file: "textfile1.txt" },
  { action: "Sign contract", file: "contract1.pdf" },
  { action: "Send email", file: "email1.eml" },
  { action: "Review code", file: "code1.js" },
  { action: "Delete folder", file: "folder1" }
  ]);

  const handleOpen = (e) => {
    setIsOpen(true)
    setReportId(reports[e.target.value])
  }

  const addReport = () => {
    setIsOpen(true)
    setReportId(null)
  };

  return (
    <div className="side-menu">
      {!isOpen &&<div className="saved-reports">
        <h2 style={{fontSize: 20, fontWeight: 'bold', color: "white"}}>Сохраненные отчеты</h2>
        <ul>
          {reports.map((report, index) => (
            <li key={index} value={index} onClick={handleOpen}>
              {report.action}
            </li>
          ))}
        </ul>
      </div>
}
{isOpen && <ChangeReport open={isOpen} setOpenChangeDialog={setIsOpen} report={reportId}></ChangeReport>}
    </div>
  );
}

export default SideMenu;
